import * as echarts from "echarts";
import styles from "../index.module.less";
const toPercent: any = (num, total) => {
  if (+num === 0 || +total === 0) return 0;
  const result = Math.round((num / total) * 10000) / 100.0;
  if (result === 0) return 0;
  return result > 0 ? "+" + result + "%" : result + "%";
};
export default defineComponent({
  props: {
    formInline: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props: any, { expose }) {
    const formInline = toRef(props, "formInline");
    const _self = reactive<any>(getCurrentInstance());
    const drawEchart = () => {
      const option = {
        title: {
          text: $t("overview13"),
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}%",
        },
        legend: {
          data: [
            $t("overview14"),
            $t("overview15"),
            $t("overview16"),
            $t("overview17"),
          ],
        },
        series: [
          {
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 10,
            width: "80%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              {
                value: parseFloat(
                  toPercent(
                    formInline.value.today_active_user_num,
                    formInline.value.today_register_user_num
                  )
                ),
                name: $t("overview14"),
              },
              {
                value: parseFloat(
                  toPercent(
                    formInline.value.today_visit_user_num,
                    formInline.value.today_active_user_num_total
                  )
                ),
                name: $t("overview15"),
              },
              {
                value: parseFloat(
                  toPercent(
                    formInline.value.today_order_user_num,
                    formInline.value.today_active_user_num_total
                  )
                ),
                name: $t("overview16"),
              },
              {
                value: parseFloat(
                  toPercent(
                    formInline.value.today_pay_user_num,
                    formInline.value.today_pay_user_num_total
                  )
                ),
                name: $t("overview17"),
              },
            ],
          },
        ],
      };
      const el: any = _self.refs.chart_box;
      const _this: any = echarts.init(el);
      _this.setOption(option);
      window.addEventListener("resize", () => _this.resize());
    };
    const initPage = () => drawEchart();
    expose({ initPage });
    return () => <div class={styles.chart_box} ref="chart_box"></div>;
  },
});
